<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canva 绘图</title>
    <style>
        /* 加了这个后，canvas的宽高就变成了 500 * 500绘制直线时(线宽设大)发现形变了，所以不推荐使用 */
        /* canvas {
            border: 1px solid red;
            width: 500px;
            height: 500px;
        }  */
    </style>
</head>

<body>

    <h1>
        canvas 的使用2使用js生成canvas
    </h1>

    <script>
        // 内联试Js
        // 通过DOM 树状 document.createElement 生成画布
        // 1 获取 canvas 元素
        // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas
        let canvas = document.createElement("canvas");
        canvas.style.border = "1px dashed red";
        // 2 把canvas 添加到body中
        document.body.appendChild(canvas);
        // 3 设置canvas的宽高 默认 300 * 150
        canvas.width = 800;
        canvas.height = 500;
        // // 4 获取画笔
        let ctx = canvas.getContext("2d");
        // 5 绘制 直线
        ctx.fillStyle = "blue";
        ctx.moveTo(10, 10); // 起点
        ctx.lineTo(100, 100); // 终点
        ctx.lineWidth = 20; // 线宽
        ctx.strokeStyle = "red"; // 线条颜色
        ctx.stroke(); // 绘制

        ctx.strokeStyle = "skyblue"; // 线条颜色
        ctx.lineCap = "round"; // 线条端点样式.默认 butt, round（圆润）, square
        ctx.lineJoin = "miter"; // 线条连接处样式bevel（斜角）, round（圆润）, miter(直角，默认)
        ctx.moveTo(50, 200); // 起点
        ctx.lineTo(200, 15);
        ctx.lineTo(300, 100);
        ctx.lineTo(400, 20);
        ctx.lineTo(500, 100);
        ctx.lineTo(600, 20);
        ctx.lineTo(700, 100);
        ctx.lineTo(800, 20);
        ctx.stroke();

    </script>
</body>

</html>